<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Flow Chart</title>
    <style type="text/css">
        .end-element {
            fill: #FFCCFF;
        }
    </style>
    <link rel="stylesheet" href="./static/layout.css">
    <script src="../static/raphael.min.js"></script>
    <script src="../static/jquery-3.6.0.min.js"></script>
    <script src="../static/flowchart-latest.js"></script>
    <!-- <script src="../release/flowchart.min.js"></script> -->
    <script>

        $(document).ready(function () {
            var code = $("#code").text();
            var chart = flowchart.parse(code);
            chart.drawSVG('canvas', {
                'line-width': 3,
                'maxWidth': 20,
                'line-length': 10,
                'text-margin': 10,
                'font-size': 18,
                'font': 'normal',
                'font-family': 'Courier New',
                'font-weight': 'normal',
                'font-color': 'black',
                'line-color': 'black',
                'element-color': 'black',
                'fill': 'white',
                'yes-text': 'yes',
                'no-text': 'no',
                'arrow-end': 'block',
                'scale': 1,
                'symbols': {
                    'start': {
                        'font-color': 'red',
                        'element-color': 'green',
                        'fill': 'yellow'
                    },
                    'end': {
                        'class': 'end-element'
                    }
                },
                'flowstate': {
                    'past': { 'fill': '#CCCCCC', 'font-size': 12 },
                    'current': { 'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold' },
                    'future': { 'fill': '#FFFF99' },
                    'request': { 'fill': 'blue' },
                    'invalid': { 'fill': '#444444' },
                    'approved': { 'fill': '#58C4A3', 'font-size': 12, 'yes-text': 'APPROVED', 'no-text': 'n/a' },
                    'rejected': { 'fill': '#C45879', 'font-size': 12, 'yes-text': 'n/a', 'no-text': 'REJECTED' }
                }
            });
        });
    </script>
</head>

<body style="overflow: scroll">
    <div>
        <textarea id="code" style="display:none;">
            {{code}}
        </textarea>
    </div>
    <div id="canvas" style="position:absolute; left:50%; transform: translate(-50%,0);"></div>
</body>

</html>